<template>
  <div id="loginBox">
    <div class="log_b">
      <a-form id="form-login" :model="form" class="login-form">
        <a-form-item>
          <a-input v-model="form.nickname" placeholder="Username">
            <a-icon
              slot="prefix"
              type="user"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model="form.password" type="password" placeholder="Password">
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-checkbox style="float: left">记住密码</a-checkbox>
          <a href="" style="float: right">忘记密码</a>
        </a-form-item>
        <a-form-item>
          <a-button
            class="login-form-button"
            type="primary"
            html-type="submit"
            @click="userLogin"
            >Login</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { loadRoutes } from "@/router/asyncRouter/routerUtil";

import { getLogin } from "../api/request/login";


export default {
  data() {
    return {
      form: {
        nickname: "",
        password: "",
      },
      routers: [
        {
          router: "home",
          children: [
            {
              router: "system",
              children: ["role", "menu",'user'],
            },
          ],
        },
      ],
    };
  },
  methods: {
    userLogin() {
      let params = {
        nickname: this.form.nickname,
        pass: this.form.password,
      };
      getLogin(params).then(res => {
        console.log(res.data.data)
      }).catch(err => {

      })
      loadRoutes(this.routers);
      sessionStorage.setItem("TOKEN", 1111);
      this.$router.push("/");
    },

    
  },
};
</script>

<style scoped>
#loginBox {
  display: flex;
  height: 100%;
  background: 50% url("../assets/images/login.png");
  background-size: 100vh;
}
.log_b {
  margin: auto;
  width: 50%;
  height: 40%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 15%;
  backdrop-filter: blur(17px);
  background-color: rgba(249, 250, 250, 0.185);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
  border: 1px rgba(255, 255, 255, 0.4) solid;
  border-bottom: 1px rgba(40, 40, 40, 0.35) solid;
  border-right: 1px rgba(40, 40, 40, 0.35) solid;
}
#form-login {
  height: 70%;
  width: 70%;
}
.login-form-button {
  width: 100%;
}
</style>
